<div id="oil-working-hours">
    <div class="demo-spin-container" v-if="isSpin">
        <Spin size="large" fix></Spin>
    </div>
    <div class="report-item-header">
        <Row style="margin:10px;height: 32px;">
            <div class="fl">
                <div>{{$t("reportForm.selectDev")}}:&nbsp;</div>
            </div>
            <div style="position: relative;width: 200px;" class="fl">
                <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                    <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" :placeholder="placeholder" @on-click="onClickIcon"></i-input>
                    <transition name="fade">
                        <div class="search-item-wrapper" v-show="isShowMatchDev">
                            <ul id="ztree" class="ztree"></ul>
                        </div>
                    </transition>
                </div>
            </div>
            <div style="margin-left:10px;" class="fl">
                {{$t("reportForm.selected")}}: <span v-text="selectedCount"></span>
            </div>
            <div style="margin-left:10px;width: 80px;position: relative;" class="fl">
                <i-select v-model="tank">
                    <i-option value="0">{{$t("monitor.all")}}</i-option>
                    <i-option value="1">{{$t("device.oil1")}}</i-option>
                    <i-option value="2">{{$t("device.oil2")}}</i-option>
                    <i-option value="3">{{$t("device.oil3")}}</i-option>
                    <i-option value="4">{{$t("device.oil4")}}</i-option>
                </i-select>
            </div>
            <div style="padding-left: 10px;" class="fl">
                <div style="height: 35px; line-height: 35px;">{{$t("reportForm.selectTime")}}:&nbsp;</div>
            </div>
            <div class="fl">
                <date-picker type="date" v-model="startDate" style="width: 110px" :options="options"></date-picker>
                <Time-Picker type="time" v-model="startTime" style="width: 90px"></Time-Picker>
            </div>
            <div class="fl">
                <div>&nbsp;&nbsp;-&nbsp;&nbsp; </div>
            </div>
            <div class="fl">
                <date-picker type="date" v-model="endDate" style="width: 110px" :options="options"></date-picker>
                <Time-Picker type="time" v-model="endTime" style="width: 90px"></Time-Picker>
            </div>
            <div style="margin-left:10px;" class="fl">
                <i-button @click="onClickQuery">{{$t("reportForm.query")}}</i-button>
            </div>

            <div style="margin-left:10px;" class="rt">
                <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
            </div>
        </Row>
        <div style="width:100%;height: 225px;position: relative;">
            <Carousel dots="none" v-if="chartDataList.length">
                <Carousel-Item v-for="(item,index) in chartDataList" :key="index">
                    <div :id="'charts' + index" style="height: 225px;width: 100%;"></div>
                </Carousel-Item>
            </Carousel>
            <div v-else="!chartDataList.length" style="width:100%;height: 225px;line-height: 225px;padding: 0 10px;">
                <div style="height: 225px;background-color: #f6f6f6;text-align: center;" v-text="$t('reportForm.empty')"></div>
            </div>
        </div>
        <div style="margin:10px;">
            <i-table ref="table" :columns="columns" size="small" :data="tableData" :height="lastTableHeight" :loading="loading"></i-table>
        </div>
    </div>
</div>